<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF 智能翻译</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 40px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .container:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }

        .error {
            color: #e74c3c;
            margin: 15px 0;
            text-align: center;
            font-weight: bold;
        }

        .upload-box {
            border: 2px dashed #bdc3c7;
            padding: 50px;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .upload-box:hover {
            border-color: #3498db;
        }

        .upload-box input[type="file"] {
            display: none;
        }

        .upload-box label {
            color: #3498db;
            text-decoration: underline;
            cursor: pointer;
        }

        .format-select {
            margin: 30px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .format-select label {
            margin-right: 15px;
            font-weight: bold;
        }

        .format-select select {
            padding: 10px 15px;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .format-select select:hover,
        .format-select select:focus {
            border-color: #3498db;
        }

        button[type="submit"] {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #2980b9;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>PDF 文档翻译器</h1>

        {% if error %}
        <div class="error">{{ error }}</div>
        {% endif %}

        <form method="post" enctype="multipart/form-data">
            <div class="upload-box">
                <input type="file" name="pdf_file" accept=".pdf" required id="pdf-file-input">
                <label for="pdf-file-input">拖放 PDF 文件或点击选择文件（最大 16MB）</label>
                <p></p>
            </div>

            <div class="format-select">
                <label>输出格式：</label>
                <select name="format">
                    <option value="markdown">Markdown</option>
                    <option value="html">HTML</option>
                    <option value="text">纯文本</option>
                </select>
            </div>

            <button type="submit">开始翻译</button>
        </form>
    </div>
</body>

</html>